<template>
  <div class="dialog-warpper">
    <el-dialog v-model="dialogVisible" title="应用配置" width="650px" :fullscreen="fullscreen" :show-close="false" :draggable="true">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header" style="display: flex; justify-content: space-between; background-color: #1e6fff">
          <div :id="titleId" :class="titleClass" style="height: 38px; line-height: 38px; font-size: 16px; color: #fff; padding-left: 20px">修改应用配置</div>
          <div style="height: 38px; line-height: 38px; font-size: 18px; color: #fff; padding-right: 10px">
            <el-icon style="font-weight: bold; margin-right: 5px; cursor: pointer" v-if="fullscreen" @click="fullscreen = false"><BottomLeft /></el-icon>
            <el-icon style="font-weight: bold; margin-right: 5px; cursor: pointer" v-else @click="fullscreen = true"><FullScreen /></el-icon>

            <el-icon class="el-icon--left" style="cursor: pointer" @click="close"><CircleCloseFilled /></el-icon>
          </div>
          <!-- Close
          </el-button> -->
        </div>
      </template>
      <div style="display: flex; justify-content: center">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="Activity name">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="Activity zone">
            <el-select v-model="form.region" placeholder="please select your zone">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="Activity time">
            <el-col :span="11">
              <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
            </el-col>
            <el-col :span="2" class="text-center">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
              <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
            </el-col>
          </el-form-item>
          <el-form-item label="Instant delivery">
            <el-switch v-model="form.delivery" />
          </el-form-item>
          <el-form-item label="Activity type">
            <el-checkbox-group v-model="form.type">
              <el-checkbox value="Online activities" name="type"> Online activities </el-checkbox>
              <el-checkbox value="Promotion activities" name="type"> Promotion activities </el-checkbox>
              <el-checkbox value="Offline activities" name="type"> Offline activities </el-checkbox>
              <el-checkbox value="Simple brand exposure" name="type"> Simple brand exposure </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="Resources">
            <el-radio-group v-model="form.resource">
              <el-radio value="Sponsor">Sponsor</el-radio>
              <el-radio value="Venue">Venue</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="Activity form">
            <el-input v-model="form.desc" type="textarea" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div style="display: flex; justify-content: flex-end; align-items: center; width: 100%; height: 45px; background-color: aliceblue; border-top: 1px solid #f9f9f9">
          <div style="margin-right: 10px">
            <el-button type="primary" @click="onSave()">保存</el-button>
            <el-button @click="dialogVisible = false">关闭</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';

defineOptions({
  name: 'DwApplicationConfigDialog',
});
const dialogVisible = ref<boolean>(false);
const fullscreen = ref<boolean>(false);
const onSave = () => {};
const showDialog = () => {
  dialogVisible.value = true;
};
defineExpose({ showDialog });

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
});
</script>
<style lang="scss" scoped>
.dialog-warpper :deep(.el-dialog) {
  padding: 0;
}
.dialog-warpper :deep(.el-dialog__body) {
  height: calc(100% - 116px);
}
</style>
